<template>
  <div class="map-content">
    <div ref="leftContainer" class="left">
      <div ref="map" class="map"></div>
      <div class="bm-control">
        <el-button size="mini" @click="startEdit">开启</el-button>
      </div>
    </div>
    <div ref="rightContainer" class="right">
    </div>
  </div>
</template>

<script>
import {
  DistanceMeasure,
  DrawScene,
  MarkerDraw,
  MarkerEdit,
  Measure,
  OperateEventType,
  PolygonDraw,
  PolygonEdit,
  PolylineDraw,
  PolylineEdit
} from 'bmap-draw'

export default {
  name: "index",
  data() {
    return {
      map: null,
      drawScene: null,
      polygonEdit: null,
      overlay: null
    }
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = new BMapGL.Map(this.$refs.map, {
        //设置地图类型。BMAP_NORMAL_MAP：标准地图，BMAP_SATELLITE_MAP：普通卫星图模式，BMAP_EARTH_MAP：地球模式。
        //请注意，地球模式（BMAP_EARTH_MAP）下能支持的地图交互操作有限 ，如您需要卫星地图支持和标准地图（BMAP_NORMAL_MAP）一致的交互体验，请使用普通卫星图模式（BMAP_SATELLITE_MAP）。
        mapType: BMAP_SATELLITE_MAP,
        minZoom: 0,
        maxZoom: 21
      })
      this.map.enableScrollWheelZoom(true)
      const localCity = new BMapGL.LocalCity()
      localCity.get(result => {
        console.log("localCity result: ", result)
        const cityName = result.name
        const point = new BMapGL.Point(result.center.lng, result.center.lat)
        // const marker = new BMapGL.Marker(point) // 创建标注
        // this.map.addOverlay(marker)
        this.map.centerAndZoom(point, 18)
        this.map.setCenter(cityName)

        // 添加比例尺控件
        var scaleCtrl = new BMapGL.ScaleControl({
          offset: new BMapGL.Size(1600, 10)
        });
        this.map.addControl(scaleCtrl);

        //监听地图上鼠标移动事件
        this.map.addEventListener("mousemove", e => {
          // console.log("mousemove: e= ", e)
        });

        //监听地图比例缩放事件
        this.map.addEventListener("zoomend", () => {
          // 监听地图缩放事件
          var curMapZoom = this.map.getZoom();
          console.log("curMapZoom= ", curMapZoom)
        });

        this.initDraw()
      })
    },
    initDraw() {
      this.overlay = new BMapGL.Polygon([
        new BMapGL.Point(114.31818, 30.595421),
        new BMapGL.Point(114.323929, 30.594037),
        new BMapGL.Point(114.320317, 30.591457),
      ], {
        strokeStyle: 'solid', //覆盖物的样式，solid或dashed
        strokeColor: 'yellow',
        fillColor: '#005a65', //多边形内部的填充色
        strokeWeight: 3,
        strokeOpacity: 0.5
      });

      this.map.addOverlay(this.overlay);

      this.drawScene = new DrawScene(this.map
        , {
          isOpen: false, //默认是否开启绘制状态
          noLimit: true, //是否无限制绘制，默认为false, 限制绘制
          enableSnap: false, //是否开启可吸附，默认false
          snapDistance: 10, //吸附范围，默认10
          //点线面图形样式配置
          baseOpts: {
            strokeStyle: 'solid',
            strokeColor: 'yellow',
            // fillColor: 'rgba(102,192,172,0.1)', //多边形内部的填充色
            fillColor: '#005a65', //多边形内部的填充色
            strokeWeight: 3,
            strokeOpacity: 0.5
          },
          //提示文字样式配置
          labelOptions: {
            borderRadius: '2px',
            background: '#b5d3fb',
            border: '1px solid #b5d3fb',
            color: '#333',
            fontSize: '12px',
            letterSpacing: '0',
            padding: '5px'
          },
          //吸附点样式配置
          // matchOverlay: {}
        }
      );
      //点击编辑完成的对勾、取消编辑等时刻均会回调该方法
      this.drawScene.addEventListener(OperateEventType.COMPLETE, e => {
        console.log("this.drawScene 操作完成,e: ", e)
      })

      //点击取消编辑的叉叉等时刻均会回调该方法
      this.drawScene.addEventListener(OperateEventType.CANCEL, e => {
        console.log("this.drawScene 操作取消,e: ", e)
      })

      //创建多边形编辑类对象。
      this.polygonEdit = new PolygonEdit(this.drawScene);
      // 绑定操作事件
      this.polygonEdit.addEventListener('operate-change', (e) => {
        console.log('operate-change', e.target);
      });
      this.polygonEdit.addEventListener('operate-ok', (e) => {
        console.log('operate-ok', e.target);
      });
      this.polygonEdit.addEventListener('operate-cancel', (e) => {
        console.log('operate-cancel', e.target);
      });

      //创建距离测量类
      this.measure = new Measure(this.drawScene);

      //创建点绘制类。
      this.markerDraw = new MarkerDraw(this.drawScene, {
        isOpen: false, //默认不开启点绘制状态
        isSeries: false,//是否连续绘制
        enableDragging: true,
        baseOpts: {}
      });

      //创建多边形绘制类对象，继承绘制类抽象基类DrawBase，提供绘制多边形能力。
      let polygonDrawOptions = {
        hideTip: false, // 是否隐藏绘制提示，默认为true
        isOpen: false, //默认是否开启绘制状态
        baseOpts: {
          strokeStyle: 'solid',
          strokeColor: 'yellow',
          fillColor: '#005a65', //多边形内部的填充色
          strokeWeight: 3,
          strokeOpacity: 0.5
        }
      }
      this.polygonDraw = new PolygonDraw(this.drawScene, polygonDrawOptions);

      //创建折线绘制类对象，继承绘制类抽象基类DrawBase，提供绘制折线的能力。
      let polylineDrawOptions = {
        hideTip: false, // 是否隐藏绘制提示，默认为true
        isOpen: false, //默认是否开启绘制状态
        baseOpts: {
          strokeStyle: 'solid',
          strokeColor: 'yellow',
          fillColor: '#005a65', //多边形内部的填充色
          strokeWeight: 3,
          strokeOpacity: 0.5
        },
      }
      this.polylineDraw = new PolylineDraw(this.drawScene, polylineDrawOptions);

      //创建折线编辑类对象。
      this.polylineEdit = new PolylineEdit(this.drawScene);
      this.polylineEdit.addEventListener('operate-ok', (e) => {
        console.log('polylineEdit operate-ok e: ', e);
      })

      //创建点编辑类对象。
      this.markerEdit = new MarkerEdit(this.drawScene);
      // this.markerEdit.setIcon(this.wharfIcon);
      // 绑定点编辑操作事件
      this.markerEdit.addEventListener('operate-ok', e => {
        console.log('markerEdit operate-ok e: ', e.target);
      });
      this.markerEdit.addEventListener('operate-cancel', e => {
        console.log('markerEdit operate-cancel e: ', e.target);
      });

      //创建多边形编辑类对象。
      this.polygonEdit = new PolygonEdit(this.drawScene);
      // 绑定多边形编辑操作事件，目前多边形编辑只对应电子围栏的绘制或编辑。
      // 编辑过程中的变化回调(该事件回调会在绘制过程中持续多次触发)。
      this.polygonEdit.addEventListener('operate-change', (e) => {
        console.log('polygonEdit operate-change e: ', e.target);
      });
      this.polygonEdit.addEventListener('operate-ok', (e) => {
        console.log('polygonEdit operate-ok e: ', e);
      });
      this.polygonEdit.addEventListener('operate-cancel', (e) => {
        console.log('polygonEdit operate-cancel e: ', e.target);
      });

      //创建测距类对象
      this.distanceMeasure = new DistanceMeasure(this.drawScene, {
        isSeries: false, // 不连续测量
        unit: 'metric'
      });

      // 监听测距结果
      this.distanceMeasure.addEventListener('measure-length-end', e => {
        console.log('distanceMeasure measure-length-end e: ', e);
      });

      //默认关闭测距
      this.distanceMeasure.close();

    },
    startEdit() {
      let overlay = _.cloneDeep(this.overlay); //此处需使用深拷贝;
      this.polygonEdit.open(overlay);
    }
  }
}
</script>

<style scoped>
.map-content {
  /*height: calc(100vh - 84px);*/
  /*width: 100vw;*/
  /*position: relative;*/

  --rightWidth: 400px;
  display: flex;
  flex-direction: row;
  width: 100vw;
}

.left {
  position: relative;
  height: calc(100vh - 84px);
  /*width: 100vw;*/
  width: calc(100vw - 200px - var(--rightWidth));
  background-color: red;
}

.left .map {
  height: 100%;
  width: 100%;
}

.left .bm-control {
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 10px;
  left: 3px;
  width: 100%;
  z-index: 100;
  background-color: yellow;
}

.right {
  height: calc(100vh - 84px);
  /*padding-left: 5px;*/
  /*padding-top: 5px;*/
  /*width: 100px;*/
  background-color: #f8f2f2;
  overflow-y: auto;
}

</style>
